<template>
  <a-layout>
    <div class="header">
      <div class="logo">
        <div>LOGO大模型辅助招标分析平台</div>
        <h1>欢迎使用InteLLiBid</h1>
      </div>
      <nav class="nav">
        <ul>
          <li v-for="item in navList" :key="item.title">
            <img :src="item.icon" />
            <p>{{ item.title }}</p>
          </li>
        </ul>
      </nav>
    </div>
    <a-layout-content class="main">
      <div style="display: flex; justify-content: space-between; padding: 0 10px;">
        <a-button type="primary" danger @click="handleAddFolder" class="add-button">
          <PlusOutlined />
          新建
        </a-button>
        <div>
          <a-select
            ref="select"
            v-model:value="selectValue"
            :options="selectData"
            style="width: 88px"
          />
        </div>
      </div>
      <section class="project-grid">
        <a-card v-for="project in projectList" :key="project.key" class="project-card" hoverable>
          <template #cover>
            <div class="project-icon">
              <FolderOutlined style="font-size: 40px" />
              <MoreOutlined style="font-size: 26px" />
            </div>
          </template>
          <a-card-meta :title="project.name">
            <template #description>
              <div class="project-info">
                <p>项目类型：{{ project.type }}</p>
                <p>适应模板：{{ project.template }}</p>
                <p>创建日期：{{ project.date }}</p>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </section>
      <div class="pagination">
        <a-pagination v-model:current="current" show-quick-jumper :total="500" @change="onChange" />
      </div>
    </a-layout-content>
    <a-layout-footer style="background: #fff; text-align: center;">
      标书管理系统 ©2025
    </a-layout-footer>
  </a-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import navIcon1 from '@/assets/home/nav-icon1.png';
import navIcon2 from '@/assets/home/nav-icon2.png';
import navIcon3 from '@/assets/home/nav-icon3.png';
import navIcon4 from '@/assets/home/nav-icon4.png';
import navIcon5 from '@/assets/home/nav-icon5.png';
import navIcon6 from '@/assets/home/nav-icon6.png';
import { PlusOutlined, FolderOutlined, MoreOutlined } from '@ant-design/icons-vue';

interface MenuItem {
  key: string;
  title: string;
  path: string;
}

const menuItems = ref<MenuItem[]>([
  { key: 'home', title: '首页', path: '/' },
  { key: 'projects', title: '项目列表', path: '/projects' }
]);

const selectValue = ref('最近');
const selectData = ref([
  {
    value: '1',
    label: '最近',
  },
  {
    value: '2',
    label: '标题',
  },
  {
    value: '3',
    label: '与我分享',
  },
])

const navList = ref([
  {
    title: '招标书',
    icon: navIcon1,
    link: '',
  },
  {
    title: '应标书',
    icon: navIcon2,
    link: '',
  },
  {
    title: '模板管理',
    icon: navIcon3,
    link: '',
  },
  {
    title: '项目管理',
    icon: navIcon4,
    link: '',
  },
  {
    title: '数据查询',
    icon: navIcon5,
    link: '',
  },
  {
    title: '使用帮助',
    icon: navIcon6,
    link: '',
  },
]);

const projectList = ref([
  {
    key: '1',
    name: '北京污水管理',
    type: '市政工程',
    template: '3个',
    date: '2025年2月10日',
  },
  {
    key: '2',
    name: '道路维修工程',
    type: '道路工程',
    template: '2个',
    date: '2025年2月9日',
  },
  {
    key: '3',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
  {
    key: '4',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
  {
    key: '5',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
  {
    key: '6',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
  {
    key: '7',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
  {
    key: '3',
    name: '公园绿化项目',
    type: '市政工程',
    template: '4个',
    date: '2025年2月8日',
  },
]);

const current = ref(1);
const onChange = (pageNumber: number) => {
  console.log('Page: ', pageNumber);
};

const handleAddFolder = () => {
  // 实现新建文件夹的逻辑
  console.log('新建文件夹');
};
</script>

<style scoped lang="less">
.layout {
  min-height: 100vh;
}

.header {
  padding: 1em 50px 0;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    div {
      font-size: 20px;
      margin-bottom: 20px;
    }
    h1 {
      margin: 0;
      font-size: 32px;
    }
  }

  .nav {
    ul {
      display: flex;
      gap: 20px;
      li {
        text-align: center;
        cursor: pointer;
        img {
          margin-bottom: 20px;
        }
        &:hover {
          color: #ff4d4f;
        }
      }
    }
  }
}

.main {
  padding: 20px;
  background: #f5f5f5;

  .add-button {
    margin-bottom: 20px;
  }

  .project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px;

    .project-card {
      background: #fff;
      border-radius: 8px;
      transition: all 0.3s;

      .project-icon {
        padding: 30px 14px;
        display: flex;
        justify-content: space-between;
        background: #fafafa;
        color: #ff4d4f;
      }

      .project-info {
        p {
          margin: 8px 0;
          color: #666;
        }
      }

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: center;
  }
}
</style>